<template>
  <aside :class="sidebarClasses" class="fixed md:relative top-16 left-0 bottom-0 w-64 bg-white shadow-md z-10 transform transition-transform duration-300 ease-in-out overflow-y-auto">
    <div class="p-4">
      <div class="text-sm text-gray-500 font-medium mb-4">主导航</div>
      <nav class="space-y-1">
        <router-link to="/" class="flex items-center px-4 py-2 text-gray-700 rounded-md hover:bg-gray-100 transition-colors">
          <i class="fa fa-home w-6"></i>
          <span>首页</span>
        </router-link>
        <router-link to="/about" class="flex items-center px-4 py-2 text-gray-700 rounded-md hover:bg-gray-100 transition-colors">
          <i class="fa fa-info-circle w-6"></i>
          <span>关于我们</span>
        </router-link>
        <router-link to="/services" class="flex items-center px-4 py-2 text-gray-700 rounded-md hover:bg-gray-100 transition-colors">
          <i class="fa fa-cogs w-6"></i>
          <span>服务项目</span>
        </router-link>
        <router-link to="/contact" class="flex items-center px-4 py-2 text-gray-700 rounded-md hover:bg-gray-100 transition-colors">
          <i class="fa fa-envelope-o w-6"></i>
          <span>联系我们</span>
        </router-link>
      </nav>

      <div class="mt-8 pt-6 border-t border-gray-200">
        <div class="text-sm text-gray-500 font-medium mb-4">资源</div>
        <nav class="space-y-1">
          <a href="#" class="flex items-center px-4 py-2 text-gray-700 rounded-md hover:bg-gray-100 transition-colors">
            <i class="fa fa-book w-6"></i>
            <span>文档</span>
          </a>
          <a href="#" class="flex items-center px-4 py-2 text-gray-700 rounded-md hover:bg-gray-100 transition-colors">
            <i class="fa fa-question-circle w-6"></i>
            <span>帮助中心</span>
          </a>
        </nav>
      </div>
    </div>

    <!-- 移动端关闭按钮 -->
    <div class="lg:hidden absolute top-0 right-0 p-2">
      <button @click="closeSidebar" class="text-gray-500 hover:text-gray-700 focus:outline-none">
        <i class="fa fa-times"></i>
      </button>
    </div>
  </aside>

  <!-- 移动端遮罩层 -->
  <div v-if="isOpen && !isDesktop" class="fixed inset-0 bg-black bg-opacity-50 z-5 transition-opacity duration-300" @click="closeSidebar"></div>
</template>

<script>
export default {
  props: {
    isOpen: Boolean,
    closeSidebar: Function
  },
  computed: {
    sidebarClasses() {
      return {
        '-translate-x-full': !this.isOpen && !this.isDesktop,
        'translate-x-0': this.isOpen || this.isDesktop
      }
    },
    isDesktop() {
      return window.innerWidth >= 1024
    }
  },
  mounted() {
    window.addEventListener('resize', this.handleResize)
  },
  beforeUnmount() {
    window.removeEventListener('resize', this.handleResize)
  },
  methods: {
    handleResize() {
      // 窗口大小变化时，在桌面模式下强制显示侧边栏
      if (this.isDesktop) {
        this.$emit('close-sidebar', false)
      }
    }
  }
}
</script>